forum

home / developersection / forums / how to create dropdown menu in css html.

Ask Question

How to create Dropdown Menu in css Html.

Anonymous User 1929 02-Mar-2016
We want to  create Dropdown Menu in css Html. How to do this Please Help me.
css-css3 html  css 
Updated on 02-Mar-2016
Anonymous User

Other

I am a content writter !

Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

02-Mar-2016 
@{


    Layout = null;


}


<!DOCTYPE html>


<html>


<head>


    <title>Forum</title>


    <meta name="viewport" content="width=device-width" />


    <title></title>


    <style>


        .main {


            width: 349px;


            background-color: #E40E0E;


            padding-left: 10px;


            padding-right: 10px;


        }



        .dropbtn {


            background-color: #E40E0E;


            color: white;


            padding: 16px;


            font-size: 16px;


            border: none;


            cursor: pointer;


        }



        .dropdown {


            position: relative;


            display: inline-block;


        }



        .dropdown-content {


            display: none;


            position: absolute;


            background-color: #f9f9f9;


            min-width: 160px;


            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);


        }



            .dropdown-content a {


                color: black;


                padding: 12px 16px;


                text-decoration: none;


                display: block;


            }



                .dropdown-content a:hover {


                    background-color: #f1f1f1;


                }



        .dropdown:hover .dropdown-content {


            display: block;


        }



        .dropdown:hover .dropbtn {


            background-color: #EA5041;


        }


    </style>


</head>


<body>


    <div class="main">


        <div class="dropdown">


            <button class="dropbtn">Master</button>


            <div class="dropdown-content">


                <a href="#">Country Master</a>


                <a href="#">State Master</a>


                <a href="#">City Master</a>


                  <a href="#">Subcity Master</a>


            </div>


        </div>


        <div class="dropdown">


            <button class="dropbtn">Transaction</button>


            <div class="dropdown-content">


                <a href="#">Debit Note</a>


                <a href="#">Credit Note</a>


                <a href="#">Payment</a>


                   <a href="#">Contra</a>


            </div>


        </div>


        <div class="dropdown">


            <button class="dropbtn">MIS</button>


            <div class="dropdown-content">


                <a href="#">Link 1</a>


                <a href="#">Link 2</a>


                <a href="#">Link 3</a>


            </div>


        </div>


        <div class="dropdown">


            <button class="dropbtn">Report</button>


            <div class="dropdown-content">


                <a href="#">Link 1</a>


                <a href="#">Link 2</a>


                <a href="#">Link 3</a>


            </div>


        </div>


    </div>


</body>


</html>
How to create Dropdown Menu in css Html.
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy